// import XtxSkeleton from './xtx-sleleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'

// import XtxBread from '@/components/library/xtx-bread.vue'
// import XtxBreadItem from '@/components/library/xtx-bread-item.vue'
import defaultImg from '@/assets/images/200.png'
// node.js 设置路径为./，文件后缀名为.vue的文件
const importFn = require.context('./', false, /\.vue$/)
console.log(importFn.keys())

const defineDirective = (app) => {
  // 扩展自定义指令
  app.directive('lazyload', {
    // Vue2规则 ：inserted
    // inserted () {}
    // Vue3规则：mounted
    mounted(el, bindings) {
      // el表示使用指令的DOM元素
      // bindings表示指令相关的信息
      // 指令的功能：实现图片的懒加载
      // 1、监听图片进入可视区
      const oberver = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          // 进入了可视区
          // 2、给图片的src属性赋值图片的地址
          el.src = bindings.value
          // 取消图片的监听
          oberver.unobserve(el)
          // 加载的图片失败了，显示默认的图片地址
          el.onerror = () => {
            // 显示默认图片
            el.src = defaultImg
          }
        }
      })
      // 添加图片的监听
      oberver.observe(el)
    }
  })
}

export default {
  install(app) {
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    // app.component(XtxMore.name, XtxMore)
    // app.component(XtxBread.name, XtxBread)
    // app.component(XtxBreadItem.name, XtxBreadItem)

    // 批量自动化注册组件
    // importFn.keys()得到的是文件路径的数组
    importFn.keys().forEach(filePath => {
      // 自动化导入组件
      // importFn(filePath)得到的是文件export default 导出的对象
      const component = importFn(filePath).default
      // 把每一个导入的组件配置为全局组件
      app.component(component.name, component)
    })
    // 自定义指令
    defineDirective(app)
  }
}
